<template>
  <vxe-modal v-model="dialogFlag" :title="title" @close="close" width="500">
        <template #default>
        <el-form ref="ruleFormRef" :rules="rules" :model="formdata" label-width="80px" size="small">
          <el-form-item v-if="!editData.userId" label="所属公司" prop="companyId">
            <company-select v-model="formdata.companyId" :disabled="userStore.userInfo.roleId!=1" />
          </el-form-item>
          <el-form-item label="姓名" prop="nick">
            <el-input v-model="formdata.nick" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item label="账号" prop="userName">
            <el-input v-model="formdata.userName" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="角色" prop="userRoleId">
            <role-select v-model="formdata.userRoleId" :params="{isEnable:true,companyId:formdata.companyId}" />
          </el-form-item>
          <el-form-item>
                <div style="text-align: right;width: 100%;">
                  <el-button size="small" @click="close"><vxe-icon name="close"></vxe-icon>取 消</el-button>
                  <el-button size="small" type="primary"  @click="save"><vxe-icon name="check"></vxe-icon>确定</el-button>
                </div>
            </el-form-item>
        </el-form>
    </template>
</vxe-modal>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { addUser, editUser } from '@/api/system'
import { message } from '@/utils/element'
import companySelect from '@/components/custom/companySelect.vue'
import roleSelect from '@/components/custom/roleSelect.vue'
import { useUserStore } from '@/pinia/modules/user'
const userStore = useUserStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  title: String,
  editData: Object,
  type: Number // 操作类型：1为新增，2为编辑，3为查看
})
const emit = defineEmits(['update:show', 'success'])

const formdata = ref({})
const ruleFormRef = ref(null)

// 验证手机号
const checkPhone = (rule, phone, callback) => {
  const myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/
  if (!myreg.test(phone)) {
    return callback(new Error('手机号输入有误'))
  } else {
    callback() // 验证通过
  }
}
const rules = reactive({
  companyId: [
    { required: true, message: '请选择所属公司', trigger: 'blur' },
    // { min: 3, max: 50, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  nick: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
  ],
  userName: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { validator: checkPhone, trigger: 'blur' }
  ],
  userRoleId: [
    { required: true, message: '请选择角色名称', trigger: 'blur' },
  ]
})

onMounted(() => {
  formdata.value.companyId = userStore.userInfo.companyId
  if (props.editData.id) {
    formdata.value = props.editData
  }
})

const dialogFlag = ref(props.show)

const save = async() => {
  await ruleFormRef.value.validate(async(valid, fields) => {
    if (valid) {
      let res = {}
      if (props.editData.id) {
        res = await editUser(formdata.value)
      } else {
        res = await addUser(formdata.value)
      }
      if (res.code == 0 || res.success) {
        message('数据提交成功', 2)
        emit('success')
        close()
      } else {
        message(res.message, 3)
      }
    }
  })
}

const close = () => {
  emit('update:show', false)
}
</script>
<style lang="scss" scoped>
    .addBox{
        display: flex;
        height: 40px;
        line-height: 30px;
        .label{
            width: 70px;
        }
    }
</style>
